<template>
  <view class="recommendMV">
    <view class="container_MV">
      <view class="www" v-for="item in MVList" :key="item.id" @click="navTovideoDetail(item.id,2)">
        
          <image :src="item.cover" mode="widthFix"></image>
          <text class="time">{{item.duration}}</text>
       <view class="vvv">
         <text style="color: #668ebd; font-size: 30rpx;">{{item.name}}</text>
         <text>{{item.artists[0].name}}</text>
         <text>{{ item.playCount > 10000 ? (item.playCount / 10000).toFixed(1) + '万播放' : (item.playCount / 1000).toFixed(1) + '' }}</text>
       </view>
        
        
      </view>
      
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  const dayjs = require('dayjs')
export default {
  onLoad() {
    this.getMVList()
  },
  data() {
    return {
      MVList:[]
    }
  },
  methods: {
    ...mapMutations(['UpdateVideoId']),
    async getMVList() {
      const { data: res } = await uni.$http.get('mv/all', )
      if (res.code !== 200) return uni.$showMsg('MV列表获取失败')
      // console.log(res)
      this.MVList = res.data
      this.MVList.forEach(item=>{
       item.duration= dayjs(item.duration).format('mm:ss')
      })
    },
    navTovideoDetail(id,type) {
          this.UpdateVideoId(id) 
          uni.navigateTo({
            url: '/subpkg/videoDetail/videoDetail?type=' + type
          })
        }
  }
}
</script>

<style lang="scss" scoped>
  .container_MV{
    display: flex;
    flex-direction: column;
  }
  .www{
    display: flex;
    margin: 20rpx 20rpx 10rpx 20rpx;
    position: relative;
    
  }
  .vvv{
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
  }
  .vvv text{
    margin-left: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .www image{
    flex: 2;
    // width: 400rpx;
    // height: 200rpx;
    border-radius: 20rpx;
  }
  .time{
    position: absolute;
    bottom: 17%;
    left: 38%;
    color: #fff;
  }
</style>
